<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="阿福易购">
    <meta content="telephone=no" name="format-detection" />
    <meta content="email=no" name="format-detection" />
    <!-- uc、qq浏览器 -->
    <meta name="screen-orientation" content="portrait">
    <meta name="full-screen" content="yes">
    <meta name="browsermode" content="application">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="x5-page-mode" content="app">
    <meta name="HandheldFriendly" content="true">
    <meta name="MobileOptimized" content="320">
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <meta name="keywords" content="{{$SEO['keywords']}}"/>
    <meta name="description" content="{{$SEO['description']}}"/>
    <title>修改收货地址-{{$SEO['title']}}</title>
    <link rel="stylesheet" href="{{ asset('/build/css/app.min.css') }}">
</head>
<body ontouchstart="">
<header class="ui-header ui-header-stable    af-header">
    <ul class="ui-row-flex">
        <li class="ui-col ui-flex ui-flex-pack-start">
            <i data-href="/my/address" class="ui-icon-return af-icon-home"></i>
        </li>
        <li class="ui-col ui-flex ui-flex-pack-center">
            <h1>收货地址</h1>
        </li>
        <li class="ui-col ui-flex ui-flex-pack-end">
        </li>
    </ul>
</header>

<footer class="ui-footer af-footer">
    <div class="ui-btn-wrap" style="margin-top: -10px;">
        <button class="J-submit ui-btn-lg ui-btn-danger" >
            保存
        </button>
    </div>
</footer>

<div class="ui-container" >

    <div class="ui-form">
        <form id="form" action="/my/address/{{$addressInfo->address_id}}" method="PUT">
            @if($addressInfo)
            <div class="ui-form-item ui-border-b">
                <label for="areaInput">
                    所在地区
                </label>
                <input id="address_id" type="hidden" name="address_id" value="{{$addressInfo->address_id}}"/>
                <input id="areaInput" type="text" placeholder="请选择所在地区" required readonly/>
                <input id="areaIds" type="hidden" name="position_ids" value="{{$addressInfo->position_ids}}"/>
                <input type="hidden" name="country" value="{{$addressInfo->country}}"/>
                <input type="hidden" name="province" value="{{$addressInfo->province}}"/>
                <input type="hidden" name="city" value="{{$addressInfo->city}}"/>
                <input type="hidden" name="district" value="{{$addressInfo->district}}"/>
            </div>
            <div class="ui-form-item ui-form-item-textarea ui-border-b">
                <label for="address">
                    详细地址
                </label>
                <textarea id="address" name="address" placeholder="无需重复填写省市区，小于75个字" data-reg-msg="请输入详细地址" maxlength="75" required>{{$addressInfo->address}}</textarea>
            </div>
            <div class="ui-form-item ui-border-b">
                <label for="consignee">
                    收获人姓名
                </label>
                <input id="consignee" type="text" name="consignee" placeholder="请输入收货人姓名" value="{{$addressInfo->consignee}}" required>
                <a href="#" class="ui-icon-close af-hide"></a>
            </div>
            <div class="ui-form-item ui-border-b">
                <label for="id_card">
                    身份证号码
                </label>
                <input id="id_card" type="text" name="id_card" placeholder="请输入身份证号码" data-reg="(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$)" value="{{$addressInfo->id_card}}" required data-reg-msg="请输入正确的身份证号码">
                <a href="#" class="ui-icon-close af-hide"></a>
            </div>
            <div class="ui-form-item ui-border-b">
                <label for="mobile">
                    手机号码
                </label>
                <input id="mobile" type="text" name="mobile" placeholder="请输入手机号码" data-reg="^1[3|4|5|7|8]\d{9}$" value="{{$addressInfo->mobile}}" required data-reg-msg="请输入正确的手机号码">
                <a href="#" class="ui-icon-close af-hide"></a>
            </div>
            <div class="ui-form-item ui-form-item-switch ui-border-b">
                <p>
                    设为默认地址
                </p>
                <label class="ui-switch">
                    <input type="checkbox" @if($addressInfo->is_default) checked @endif name="is_default" value="1">
                </label>
            </div>
            @endif
        </form>
    </div>
</div>


<script src="{{ asset('/build/lib/zepto.min.js') }}"></script>
<script src="{{ asset('/build/js/frozen.js') }}"></script>
<script src="{{ asset('/build/js/app.min.js') }}"></script>

<!--省市区联动-->
<link rel="stylesheet" href="{{ asset('/build/js/LArea/LArea.min.css') }}">
<script src="{{ asset('/build/js/LArea/LAreaData1.js') }}"></script>
<script src="{{ asset('/build/js/LArea/LArea.min.js') }}"></script>

<script>
    $(function () {
        var form=$('#form');
        $('.J-submit').on('click',function () {form.submit();});

        //表单验证
        form.on('submit',function () {
            var isOk= RegForm(form);
            if(!isOk) return isOk;
            MyAjax(form.attr('action'),form.attr('method'),form.serialize(),function(res){
                console.log(res);
               topTip('编辑成功！');
               window.location.href='/my/address';
            });

            return false;
        });

        //省市区
        initAreaSelect({
            trigger:'#areaInput',
            valueTo:'#areaIds'
        });

        //地址变更
        $('#areaInput').on('input',function () {
            var that=$(this),valArr=that.val().split(',');
            var province=that.siblings('[name="province"]');
            var city=that.siblings('[name="city"]');
            var district=that.siblings('[name="district"]');
            if(valArr.length==3){
                province.val(valArr[0]);
                city.val(valArr[1]);
                district.val(valArr[2]);
            }else{
                province.val('');
                city.val('');
                district.val('');
            }
        });
    });
</script>
</body>
</html>